<template>
  <el-card>
    <header-search btn-name="添加用户" @Search="Search" @btn-click="dialogVisible=true" />
    <!--    <my-header @Search="Search" @add-user="dialogVisible=true" />-->
    <list-table :users="userList" @setUser="setUser" @edit-state="editState" @success="getUserList" />
    <my-pagination :params="params" :total="total" @Set="getUserList" />
    <!-- Dialog -->
    <dialog-from v-if="dialogVisible" ref="dialog" v-model="dialogVisible" @success="getUserList" />
    <!-- /Dialog -->
  </el-card>
</template>

<script>
import { UserList } from '@/api/UserManagement'
import ListTable from './components/ListTable.vue'
import MyPagination from './components/MyPagination.vue'
import DialogFrom from './components/dialog.vue'
import HeaderSearch from '@/components/HeaderSearch/HeaderSearch'
export default {
  name: 'User',
  // eslint-disable-next-line vue/no-unused-components
  components: { HeaderSearch, ListTable, MyPagination, DialogFrom },
  data() {
    return {
      params: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      total: 0,
      userList: [],
      dialogVisible: false
    }
  },

  created() {
    this.getUserList()
  },

  methods: {
    async getUserList() {
      const res = await UserList(this.params)
      this.total = res.total
      this.userList = res.users
    },
    Search(i) {
      this.params.query = i
      this.params.pagenum = 1
      this.getUserList()
    },
    setUser(data) {
      this.dialogVisible = true
      this.$nextTick(_ => {
        this.$refs.dialog.form = { ...data }
      })
    },
    editState(i) {
      const index = this.userList.findIndex(item => item.id === i)
      this.userList[index].mg_state = !this.userList[index].mg_state
    }
  }
}
</script>

<style scoped>
.user {
  background-color: #fff;
  padding: 30px;
}
</style>
